@import '../../colors.css';

/* === Derived dynamic colors === */
@define-color base alpha(@surface, 1.0);                      /* translucent blurred base */
@define-color surface_custom alpha(@surface_container_high,0.8);
@define-color hovercolor alpha(@surface_container_high,0.8);
@define-color activecolor @primary_container;

@define-color buttoncolor alpha(@inverse_primary,0.3);
@define-color hoverbutton alpha(@inverse_primary,0.5);
@define-color activebutton @inverse_primary;

@define-color bordercolor @primary;
@define-color fontcolor @on_surface;
@define-color text @on_surface;


* {
  font-size: 1rem;
  font-weight: 900;
  all: unset;
  font-family: "Fira Sans Semibold", "Font Awesome 7 Free", "Font Awesome 7 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
  transition: 200ms;
}

.widget-mpris {
  all: unset;
}

.notification-row {
  outline: none;
  margin: 0;
  padding: 0px;
}

.floating-notifications.background .notification-row .notification-background .notification {
    background-color: @surface;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 250%, @primary, @surface) padding-box,
        linear-gradient(#FFFFFF,@on_primary) border-box;
    border: 1px solid transparent;	
    opacity:1.0;
    margin:10px;
    margin-right:18px;
    box-shadow: 1 1 5 1px @shadow;
}

.floating-notifications.background .notification-row .notification-background .notification.critical {
    background-color: @surface;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 250%, @primary, @surface) padding-box,
        linear-gradient(#FFFFFF,@on_primary) border-box;
    border: 1px solid transparent;	
    opacity:1.0;
    margin:10px;
    margin-right:18px;
    box-shadow: 1 1 5 1px @shadow;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  .notification-content {
  margin: 1.2rem;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > * {
  min-height: 2.4em;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action {
  border-radius: 0.5rem;
  background-color: alpha(@crust, 0.95);
  margin: 0.4rem;
  border: 1px solid transparent;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:hover {
  background-color: @hover;
  border: 1px solid @primary;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .notification
  > *:last-child
  > *
  .notification-action:active {
  background-color: @primary;
  color: @text;
}


.summary {
  font-weight: 800;
  font-size: 1rem;
}

.body {
  font-size: 0.8rem;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button {
  background: transparent;
  border-radius: 20px;
  color: @text;
  background-color: alpha(#fff, 0.5);
  margin: 0px;
  padding: 4px;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button:hover {
  background-color: @primary;
}

.floating-notifications.background
  .notification-row
  .notification-background
  .close-button:active {
  background-color: @primary;
  color: @text;
}

.notification.critical progress {
  background-color: @primary;
}

.notification.low progress,
.notification.normal progress {
  background-color: @primary;
}
